<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@7.2.5/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Zoom Image on Hover Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth
      var height = window.innerHeight

      //imageObj.src = 'https://konvajs.org/assets/yoda.jpg';

      // const json = '{"attrs":{"width":2382,"height":1684,"draggable":true},"className":"Stage","children":[{"attrs":{"hitGraphEnabled":false},"className":"Layer","children":[{"attrs":{},"className":"Image"},{"attrs":{"source":"https://konvajs.org/assets/yoda.jpg"},"className":"Image"}]},{"attrs":{},"className":"Layer","children":[{"attrs":{"draggable":true,"x":306,"y":303,"transformsEnabled":"position"},"className":"Group","children":[{"attrs":{"radius":20,"stroke":"#231fff","strokeWidth":4,"fill":"#ffffff"},"className":"Circle"},{"attrs":{"text":"1","fontSize":14,"originX":"center","originY":"center","fill":"#231fff","x":-5,"y":-5},"className":"Text"},{"attrs":{"data":"M.91,0H29.09A.91.91,0,0,1,30,.91v243a.88.88,0,0,1-.26.63L15.65,258.86a.9.9,0,0,1-1.3,0L.26,244.52a.88.88,0,0,1-.26-.63V.91A.91.91,0,0,1,.91,0Z","originX":"center","originY":"bottom","x":10,"y":15,"angle":-30,"fill":"#231fff","scaleX":0.15,"scaleY":0.15,"rotation":-30},"className":"Path"}]},{"attrs":{"draggable":true,"x":490,"y":557,"transformsEnabled":"position"},"className":"Group","children":[{"attrs":{"radius":20,"stroke":"#231fff","strokeWidth":4,"fill":"#ffffff"},"className":"Circle"},{"attrs":{"text":"2","fontSize":14,"originX":"center","originY":"center","fill":"#231fff","x":-5,"y":-5},"className":"Text"},{"attrs":{"data":"M.91,0H29.09A.91.91,0,0,1,30,.91v243a.88.88,0,0,1-.26.63L15.65,258.86a.9.9,0,0,1-1.3,0L.26,244.52a.88.88,0,0,1-.26-.63V.91A.91.91,0,0,1,.91,0Z","originX":"center","originY":"bottom","x":10,"y":15,"angle":-30,"fill":"#231fff","scaleX":0.15,"scaleY":0.15,"rotation":-30},"className":"Path"}]}]}]}';
      const json = {
        attrs: {
          width: 2382,
          height: 1684,
          draggable: true,
        },
        className: 'Stage',
        children: [
          {
            attrs: {
              hitGraphEnabled: false,
            },
            className: 'Layer',
            children: [
              {
                attrs: {},
                className: 'Image',
              },
              {
                attrs: {
                  source: 'https://konvajs.org/assets/yoda.jpg',
                },
                className: 'Image',
              },
            ],
          },
          {
            attrs: {},
            className: 'Layer',
            children: [
              {
                attrs: {
                  draggable: true,
                  x: 306,
                  y: 303,
                  transformsEnabled: 'position',
                },
                className: 'Group',
                children: [
                  {
                    attrs: {
                      radius: 20,
                      stroke: '#231fff',
                      strokeWidth: 4,
                      fill: '#ffffff',
                    },
                    className: 'Circle',
                  },
                  {
                    attrs: {
                      text: '1',
                      fontSize: 14,
                      originX: 'center',
                      originY: 'center',
                      fill: '#231fff',
                      x: -5,
                      y: -5,
                    },
                    className: 'Text',
                  },
                  {
                    attrs: {
                      data: 'M.91,0H29.09A.91.91,0,0,1,30,.91v243a.88.88,0,0,1-.26.63L15.65,258.86a.9.9,0,0,1-1.3,0L.26,244.52a.88.88,0,0,1-.26-.63V.91A.91.91,0,0,1,.91,0Z',
                      originX: 'center',
                      originY: 'bottom',
                      x: 10,
                      y: 15,
                      angle: -30,
                      fill: '#231fff',
                      scaleX: 0.15,
                      scaleY: 0.15,
                      rotation: -30,
                    },
                    className: 'Path',
                  },
                ],
              },
              {
                attrs: {
                  draggable: true,
                  x: 120,
                  y: 157,
                  transformsEnabled: 'position',
                },
                className: 'Group',
                children: [
                  {
                    attrs: {
                      radius: 20,
                      stroke: '#231fff',
                      strokeWidth: 4,
                      fill: '#ffffff',
                    },
                    className: 'Circle',
                  },
                  {
                    attrs: {
                      x: 2,
                      y: 1,
                      text: "COMPLEX TEXT\n\nAll the world's a stage, and all the men and women merely players. They have their exits and their entrances.",
                      fontSize: 18,
                      fontFamily: 'Calibri',
                      fill: '#555',
                      width: 300,
                      padding: 20,
                      align: 'center',
                    },
                    className: 'Text',
                  },
                  {
                    attrs: {
                      data: 'M.91,0H29.09A.91.91,0,0,1,30,.91v243a.88.88,0,0,1-.26.63L15.65,258.86a.9.9,0,0,1-1.3,0L.26,244.52a.88.88,0,0,1-.26-.63V.91A.91.91,0,0,1,.91,0Z',
                      originX: 'center',
                      originY: 'bottom',
                      x: 10,
                      y: 15,
                      angle: -30,
                      fill: '#231fff',
                      scaleX: 0.15,
                      scaleY: 0.15,
                      rotation: -30,
                    },
                    className: 'Path',
                  },
                ],
              },
            ],
          },
        ],
      }
      const stage = Konva.Node.create(json, 'container')

      stage.find('Image').forEach((node) => {
        const img = new Image()
        img.src = node.getAttr('source')
        img.onload = () => {
          node.image(img)
          stage.batchDraw()
        }
      })
      var alllayer = stage.find('Layer')
      var zoomLevel = 2
      alllayer.forEach((layer) => {
        scale(layer, {
          x: 9,
          y: 10,
          zoomLevelx: 2,
          zoomLevelY: 2,
        })
      })

      function scale(Layer, args) {
        Layer.x(args.x)
        Layer.y(args.y)
        Layer.scale({
          x: args.zoomLevelx,
          y: args.zoomLevelY,
        })
      }

      console.log(stage.toJSON())
    </script>
  </body>
</html>
